<template>
    <div>
        <search-bar />
        <!-- <div class="mx-auto max-w-[1000px] px-4 py-8">
            <header-nav @change="handleChange" />
        </div> -->
        <a-layout class="container mx-auto gap-8 px-4 py-8" style="background: #fff">
            <a-layout-content class="flex-1 bg-white" style="padding: 0 24px; min-height: 280px">
                <article-list />
            </a-layout-content>
            <a-layout-sider width="25%" class="hidden w-full md:block md:w-96" style="background: #fff"
                ><hot-list-sidebar class="p-4"
            /></a-layout-sider>
        </a-layout>
    </div>
</template>

<script setup lang="ts">
import HeaderNav from "./components/HeaderNav.vue";
import SearchBar from "./components/SearchBar.vue";

const handleChange = (link: { title: string; href: string }) => {
    console.log("link", link);
};
</script>

<style scoped lang="scss"></style>
